<template>
    <aside class="side-left">
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#282E38"
            text-color="#94969C"
            active-text-color="#ffd04b"
        >
            <div class="aside-title">极限物联后台管理系统</div>
            <tree-menu :treeData="menuList"/>
        </el-menu>
    </aside>
</template>
<script>
import menuList from './utils/menuList.js'
import treeMenu from './components/treeMenu'
export default {
    data () {
        return {
            menuList
        }
    },
    components: {
        treeMenu
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
};
</script>

<style lang='scss' scoped>
.side-left {
  height: 100vh;
}
.el-menu-vertical-demo {
  width: 200px;
  min-width: 200px;
  height: 100%;
  .side-item {
    width: 180px !important;
  }
}
.icon-side {
  margin-right: 5px;
}
.aside-title {
  height: 50px;
  font-size: 15px;
  color: white;
  text-align: center;
  line-height: 50px;
  /* border: 1px solid red; */
}
</style>